<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script th:src="@{/static/js/vue.js}"></script>
    <script th:src="@{/static/js/axios.js}"></script>
    <script th:src="@{/static/elementui/index.js}"></script>
    <link rel="stylesheet" th:href="@{/static/elementui/index.css}">

</head>
<body>
<div id="app">

    <!--<el-form :inline="true" :model="page" class="demo-form-inline">-->
        <!--<el-form-item label="车牌号">-->
            <!--<el-input v-model="page.plate" placeholder="车牌号"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="ETC卡号">-->
            <!--<el-input v-model="page.card" placeholder="ETC卡号"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item>-->
            <!--<el-button type="primary" @click="initData(page.currentPage=1)">查询</el-button>-->
        <!--</el-form-item>-->
    <!--</el-form>-->

    <el-button type="primary" @click="handleAdd(user)">添加</el-button>
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="ID">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名">
        </el-table-column>
        <el-table-column
                prop="sex"
                label="性别">
        </el-table-column>
        <el-table-column
                prop="birth"
                label="出生日期">
        </el-table-column>
        <el-table-column
                prop="time"
                label="入职时间">
        </el-table-column>
        <el-table-column
                prop="xueli"
                label="学历">
        </el-table-column>
        <el-table-column label="职位" align="center">
            <template slot-scope="scope">
                <span>{{ scope.row.dutyList.name}}</span>
            </template>
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>
        <el-table-column
                prop="phone"
                label="电话">
        </el-table-column>
        <el-table-column
                prop="sos"
                label="紧急联系人">
        </el-table-column>
        <el-table-column label="所属部门" align="center">
            <template slot-scope="scope">
                <span>{{ scope.row.sectorList.name}}</span>
            </template>
        </el-table-column>

        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button

                           @click="handleEdit(scope.row)">编辑</el-button>
                <el-button

                           type="danger"
                           @click="handleDelete(scope.row)">删除</el-button>

            </template>
        </el-table-column>

    </el-table>

    <!--分页-->
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.currentPage"
                :page-sizes="[2, 4, 6, 8]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total">
        </el-pagination>
    </div>

    <!--添加-->

    <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="formData" :inline="true">
            <el-form-item label="名称">
                <el-input v-model="formData.name" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="性别">
                <el-radio-group v-model="formData.sex">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="生日">
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="formData.birth" style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>

            <el-form-item label="入职时间">
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="formData.time" style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>

            <el-form-item label="学历" >
                <el-input v-model="formData.xueli" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="formData.address" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="电话" >
                <el-input v-model="formData.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="紧急联系人">
                <el-input v-model="formData.sos" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="职位">
                <el-select v-model="formData.did" placeholder="请选择职位">
                    <el-option label="请选择" value=""></el-option>
                    <el-option v-for="d in List" :label="d.name" :value="d.id"></el-option>

                </el-select>
            </el-form-item>

            <el-form-item label="所属部门">
                <el-select v-model="formData.sid" placeholder="请选择部门">
                    <el-option label="请选择" value=""></el-option>
                    <el-option v-for="s in list" :label="s.name" :value="s.id"></el-option>

                </el-select>
            </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save()">确 定</el-button>
        </div>
    </el-dialog>

    <!-- 编辑标签弹层 -->
    <div class="add-form">
        <el-dialog title="编辑检查项" :visible.sync="dialogFormVisible4Edit">
            <el-form :model="formData" :inline="true">
                <el-form-item label="名称">
                    <el-input v-model="formData.name" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="性别">
                    <el-radio-group v-model="formData.sex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="生日">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="formData.birth" style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>

                <el-form-item label="入职时间">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="formData.time" style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>

                <el-form-item label="学历" >
                    <el-input v-model="formData.xueli" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="formData.address" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="电话" >
                    <el-input v-model="formData.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="紧急联系人">
                    <el-input v-model="formData.sos" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="职位">
                    <el-select v-model="formData.did" placeholder="请选择职位">
                        <el-option label="请选择" value=""></el-option>
                        <el-option v-for="d in List" :label="d.name" :value="d.id"></el-option>

                    </el-select>
                </el-form-item>

                <el-form-item label="所属部门">
                    <el-select v-model="formData.sid" placeholder="请选择部门">
                        <el-option label="请选择" value=""></el-option>
                        <el-option v-for="s in list" :label="s.name" :value="s.id"></el-option>

                    </el-select>
                </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible4Edit = false">取 消</el-button>
                <el-button type="primary" @click="edit()">确 定</el-button>
            </div>
        </el-dialog>
    </div>




</div>
<script th:inline="javascript">
    new Vue({
        el:'#app',
        data:{
            List:[],
            list:[],
            tableData:[],
            page:{
                currentPage:1,
                pageSize:2,
                total:20
            },
            title:'',
            dialogFormVisible:false,
            dialogFormVisible4Edit:false,
            formData:{},
            username:'',
            user:[[${user}]]
        },
        methods:{
            findzhiwei(){
                axios.post("/employee/findzhi").then(res=>{
                    this.List=res.data;
                })
            },
            findbumen(){
                axios.post("/employee/findbu").then(res=>{
                    this.list=res.data;
                })
            },
            initData(){
                axios.post("/employee/findPage").then(res=>{
                    this.tableData=res.data;
                    // this.page.total=res.data.total;
                })
            },
            handleEdit(row){
                this.title='编辑信息';
                this.dialogFormVisible4Edit=true;
                this.formData=row;
                // this.username=this.user.username;
                // this.formData.userId=this.user.userId;
            },
            handleDelete(row){
                this.$confirm("是否删除","提示",{type:'warning'}).then(res=>{
                    axios.post("/employee/del?id="+row.id).then(res=>{

                            this.initData();

                    })
                }).catch(()=>{
                    this.$message({
                        message:'取消操作',
                        type:'info'
                    })
                })

            },
            handleAdd(){
                this.title='添加信息';
                this.dialogFormVisible=true;
                this.tableData={};
            },
            edit(){
                axios.post("/employee/update",this.formData).then(res=>{
                    this.initData();
                    this.dialogFormVisible4Edit=false;
                })
            },
            getMoney(row){
                axios.post(`/etc/getMoney?id=${row.id}`).then(res=>{
                    if (res.data.code==0){
                        this.$message({
                            message:res.data.message,
                            type:'success'
                        })
                    } else {
                        this.$message.error(res.data.message)
                    }
                })

            },
            save(){
                axios.post("/employee/add",this.formData).then(res=>{
                        this.initData();
                        this.dialogFormVisible=false;
                })
            },
            handleSizeChange(pageSize){
                this.page.pageSize=pageSize;
                this.initData()
            },
            handleCurrentChange(currentPage){
                this.page.currentPage=currentPage;
                this.initData()
            }
        },
        created(){
            this.initData();
            this.findzhiwei();
            this.findbumen();
        }
    })
</script>
</body>
</html>